<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">个人信息修改</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<view class="view-sin">
				<view class="r-title">
					<text>用户昵称</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input">
					<u-input v-model="userInfo.nickName"></u-input>
				</view>
			</view>
			<!-- <view class="view-sin">
				<view class="r-title">
					<text>归属机构</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input flex-bc pr20" @click="$refs.treePicker._show()">
					<view>{{ userInfo.deptName }}</view>
					<u-icon color="#607589" name="arrow-down-fill" size="20"></u-icon>
				</view>
			</view> -->
			<view class="view-sin">
				<view class="r-title">
					<text>手机号码</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input">
					<u-input v-model="userInfo.phone" placeholder="请输入手机号"></u-input>
				</view>
			</view>
			<view class="view-sin">
				<view class="r-title">
					<text>邮箱</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input">
					<u-input v-model="userInfo.email" placeholder="请输入邮箱"></u-input>
				</view>
			</view>

			<view class="view-sin">
				<view class="r-title">
					<text>账号</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input r-input-disabled">
					<u-input v-model="userInfo.userName" disabled placeholder="请输入账号"></u-input>
				</view>
			</view>

			<!-- <view class="view-sin">
				<view class="r-title">
					<text>用户密码</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input">
					<u-input v-model="userInfo.password" placeholder="请输入密码"></u-input>
				</view>
			</view> -->
			<view class="view-sin">
				<view class="r-title">
					<text>用户性别</text>
				</view>
				<view class="flex-vc w100 ml50">
					<u-radio-group v-model="userInfo.sex">
						<u-radio name="0"> 男 </u-radio>
						<u-radio name="1"> 女 </u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="view-sin">
				<view class="r-title">
					<text>备注</text>
				</view>
				<view class="r-input-box">
					<u-input v-model="userInfo.remarks" type="textarea" :height="180"></u-input>
				</view>
			</view>

			<view class="view-btn" @click="userOps">确认修改</view>
		</view>
		<!-- <ba-tree-picker
			ref="treePicker"
			:multiple="false"
			@select-change="selectChange"
			title="选择机构"
			:localdata="listData"
			:selectedData="selectedData"
			valueKey="id"
			textKey="name"
			childrenKey="children"
		/> -->
	</view>
</template>
<script>
	import SelectArea from '@/components/common/select/SelectArea.vue'
	import listSelect from '@/components/common/select/listSelect.vue'
	import userMagApi from '@/api/user/userMag'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {
		name: 'personMag',
		components: {
			SelectArea,
			listSelect,
			baTreePicker
		},
		data() {
			return {
				type: '',
				appHeight: 0,
				title: '',
				userInfo: {
					deptId: '', //机构id
					deptName: '', // 机构名称
					email: '', //邮箱
					nickName: '', //用户名
					userName: '', //账户
					password: '', //密码
					phone: '', //电话
					projectId: 'e3cc3a226021fdc238bb32550647d767', //项目id
					remarks: '', //备注
					roles: [], //角色数组[角色id]
					sex: '0', //性别（0男1女）
					status: '0' //状态（0正常1停用）
				},

				listData: [this.DeptTreeData[0]],
				orlist: [],
				selectedData: []
			}
		},
		computed: {
			roleName() {
				let roles = this.userInfo.roles || []
				let item = this.orlist.filter((el) => roles.includes(el.id))
				let arr = item.map((el) => {
					return el.name
				})
				return arr.join('、')
			}
		},
		async onLoad(options) {
			if (options && options.data) {
				let postData = JSON.parse(decodeURIComponent(options.data))
				console.info(`postData:`, postData)
				if (postData.id) {
					const userInfoRes = await userMagApi.getUserPower(postData.id)
					this.userInfo = userInfoRes.data.result
					this.password = userInfoRes.data.result.password
					// console.info(` this.userInfo.roles:`, this.userInfo.roles)
					// this.selectedData = [this.userInfo.deptId] || []
				}
			}
		},
		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
			let magList = this.$getItem('magList')
			this.orlist = magList.map((el, index) => {
				el.label = el.name
				el.value = el.id
				return el
			})
			// this.yehuoLogin()
		},
		methods: {
			//监听选择（ids为数组）
			selectChange(ids, names) {
				this.userInfo.deptName = names
				this.userInfo.deptId = ids[0]
				console.info(`	this.userInfo:`, this.userInfo)
				console.log(ids, names)
			},
			async userOps() {
				if (!this.valuePass()) {
					return
				}
				const resp = await userMagApi.updateToPost({
					...this.userInfo,
					roles: this.userInfo.roles
				})
				// 修改密码
				if (this.password != this.userInfo.password) {
					const mima = await userMagApi.resetPwd({
						id: this.userInfo.id, // 用户id
						password: this.userInfo.password
					})
				}
				if (resp.msg == 'success') {
					// let getUserInfoData = this.$getItem('getUserInfoData')
					// let newData = {
					// 	...getUserInfoData,
					// 	...resp.data
					// }
					// this.$setItem('getUserInfoData', newData)

					this.yehuoeditUser(resp.data)
					let access_token = this.$getItem('access_token')
					this.$getAndSetSystemUserInfo(access_token)
					setTimeout(() => {
						uni.$emit('updateUserInfo')
					}, 1000)
				}
			},
			updateSysTemUserInfo() {
				// let access_token = this.$getItem('access_token')
				// this.$getAndSetSystemUserInfo(access_token)
			},
			valuePass() {
				let isPass = true
				let userInfo = this.userInfo
				if (userInfo.nickName == '') {
					uni.showToast({
						icon: 'error',
						title: '请输入昵称'
					})
					return false
				}
				if (userInfo.phone == '') {
					uni.showToast({
						icon: 'error',
						title: '请输入手机号'
					})
					return false
				}
				if (!/^1[3456789]\d{9}$/.test(userInfo.phone)) {
					uni.showToast({
						icon: 'error',
						title: '手机号格式错误'
					})
					return false
				}
				if (userInfo.email == '') {
					uni.showToast({
						icon: 'error',
						title: '请输入邮箱'
					})
					return false
				}
				if (!/\S+@\S+\.\S+/.test(userInfo.email)) {
					uni.showToast({
						icon: 'error',
						title: '邮箱格式错误'
					})
					return false
				}
				if (userInfo.password == '') {
					uni.showToast({
						icon: 'error',
						title: '请输入密码'
					})
					return false
				}
				if (userInfo.password.length <= 5) {
					uni.showToast({
						icon: 'error',
						title: '密码长度太短'
					})
					return false
				}
				return true
			},

			// edit 野火
			async yehuoeditUser(h5user) {
				try {
					uni.showLoading({
						title: '正在提交'
					})
					const resp = await userMagApi.yhlogin({
						account: 'admin',
						password: 'admin123'
					})
					const Authtoken = resp.headers.authtoken
					const root = await userMagApi.yhroot(Authtoken)
					let organizationId = root.data.result[0].id || 19
					console.info(`resp:`, h5user)
					const yeUserdata = await userMagApi.yhupdate(
						{
							employeeId: h5user.imId,
							email: h5user.email,
							mobile: h5user.id, // 电话（对应我们系统中的用户id）
							name: h5user.nickName, // 用户名
							organizationId: organizationId // 组织机构id
						},
						Authtoken
					)

					const resp2 = await userMagApi.updateYhId({
						Id: h5user.id,
						imId: h5user.imId
					})
					if (resp2.msg == 'success') {
						uni.showToast({
							title: '操作成功'
						})
					}
					this.$hideLoading()
				} catch (error) {
					console.error(error)
					uni.showToast({
						icon: 'error',
						title: '操作失败'
					})
					this.$hideLoading()
				}
			}
		}
	}
</script>
<style lang="less">
	.app-box {
		position: relative;
		overflow: hidden;
		width: 750rpx;
		.r-input-disabled {
			background: rgba(174, 174, 174, 0.3) !important;
		}
		.view-sin {
			margin-top: 30rpx;
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			.r-title {
				width: 154rpx;
				text-align: left;
			}
			.r-input {
				width: 520rpx;
				height: 60rpx;
				border-radius: 4rpx;
				border: 1rpx solid #aeaeae;
				background: #fff;
				align-items: center;
				display: flex;
				padding-left: 10rpx;
			}
			.r-input-box {
				width: 520rpx;
				border-radius: 4rpx;
				border: 1rpx solid #aeaeae;
				background: #fff;
				align-items: center;
				display: flex;
				padding-left: 10rpx;
			}
		}
		.view-btn {
			width: 636rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
			background: #41a4ff;
			backdrop-filter: blur(15px);
			text-align: center;
			line-height: 80rpx;
			margin: 80rpx auto;
			color: #fff;
		}
	}
</style>
